<template>
    <div class="container">
        <div class="addressHeader" v-if="userAddr" @click="address">
            <img src="../../static/images/icon/addr.png" alt="" />
            <div class="addresscontent">
                <div>
                    <span>{{ userAddr.receiver }}</span>
                    <span>{{ userAddr.mobile }}</span>
                </div>
                <div>
                    <span>{{
                        userAddr.province +
                        userAddr.city +
                        userAddr.city +
                        userAddr.addr
                    }}</span>
                </div>
            </div>
            <div class="hright">
                <div class="arrow empty"></div>
            </div>
        </div>
        <div class="header" @click="address" v-else>
            <div class="hleft">
                <image src="../../static/images/icon/plus-sign.png" />
                <span>新增收货地址</span>
            </div>
            <div class="hright">
                <div class="arrow empty"></div>
            </div>
        </div>
        <main>
            <!-- 商品卡 -->
            <div v-for="(item,index) in shopArr" :key="index">
                <van-card
                    :num="item.prodCount"
                    :price="item.price"
                    :desc="item.skuName"
                    :title="item.prodName"
                    :thumb="item.pic"
                />
            </div>
            <div class="mbottom">
                共{{ totalCount }}件商品 合计：￥{{ actualTotal }}
            </div>
            <!-- 优惠卷 -->
            <ul class="coupon">
                <li>
                    <span> 优惠券：暂无可用 </span>
                    <span>
                        <span>0张</span>
                        <span>></span>
                    </span>
                </li>
                <li>
                    买家留言：<input type="text" placeholder="给卖家留言" />
                </li>
            </ul>
            <!-- 总额 -->
            <ul class="rental">
                <li>
                    <span>订单总额：</span>
                    <span>￥{{ actualTotal }}</span>
                </li>
                <li>
                    <span>运费：</span>
                    <span>￥{{ 0.0 }}</span>
                </li>
                <li>
                    <span>优惠金额</span>
                    <span>￥{{ 0.0 }}</span>
                </li>
            </ul>
            <!-- 小计 -->
            <p class="subtotal">小计：￥{{ actualTotal }}</p>
        </main>
        <!-- 提交订单 -->
        <footer>
            <div class="fleft">
                <span> 合计： </span>
                <span> ￥{{ actualTotal }} </span>
            </div>
            <button @click="toPay">提交订单</button>
        </footer>
         <van-toast id="van-toast" />
    </div>
</template>
<script>
import { postSubmit, postPay } from "@/services";
import Toast from "@/wxcomponents/vant/dists/toast/toast";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
    data() {
        return {
            price: "",
            shopId: "",
            addrId: 0,
            shopArr:[],
        };
    },
    async mounted() {
        let { addrId } = this.$mp.query;
        if (addrId) {
            this.addrId = addrId;
        }
        this.updateState({ orderEntry: this.$mp.query.orderEntry });
        await this.loadOrderData();
        this.shopArr = this.shopCartOrders[0].shopCartItemDiscounts[0].shopCartItems
        let { prodName, skuName, price, shopId } =
            this.shopCartOrders[0].shopCartItemDiscounts[0].shopCartItems[0];
        this.prodName = prodName;
        this.skuName = skuName;
        this.price = price;
        this.shopId = shopId;
    },
    computed: {
        ...mapState("submitorder", [
            "userAddr",
            "couponIds",
            "orderEntry",
            "shopCartOrders",
            "actualTotal",
            "totalCount",
            "remark",
        ]),
    },
    methods: {
        ...mapActions("submitorder", ["postConfirm"]),
        ...mapMutations("submitorder", ["updateState"]),
        // 加载订单数据
        async loadOrderData() {
            await this.postConfirm({
                addrId: this.addrId,
                orderItem:
                    this.orderEntry === "1"
                        ? JSON.parse(wx.getStorageSync("orderItem"))
                        : undefined,
                basketIds:
                    this.orderEntry === "0"
                        ? JSON.parse(wx.getStorageSync("basketIds"))
                        : undefined,
                couponIds: this.couponIds,
                userChangeCoupon: 1,
            });
        },
        // 地址
        address() {
            console.log( this.orderEntry);
            uni.redirectTo({
                url: "/pages/delivery-address/index?order=0&orderEntry=" +
                        this.orderEntry,
            });
        },
        async toPay() {
            if (!this.userAddr) {
                Toast("请选择地址");
                return;
            }
            try{
                let { orderNumbers } = await postSubmit({
                    remarks: this.remark,
                    shopId: this.shopId,
                });
                let { nonceStr, packageValue, paySign, signType, timeStamp } =
                    await postPay({
                        payType: 1,
                        orderNumbers,
                    });
                uni.requestPayment({
                    nonceStr,
                    package: packageValue,
                    paySign,
                    signType,
                    timeStamp,
                    success: (e) => {
                        console.log("支付成功");
                        uni.redirectTo({
                            url:
                                "/pages/pay-result/index?sts=1&orderNumbers=" +
                                orderNumbers +
                                "&orderType=" +
                                this.orderType,
                        });
                    },
                    fail: (err) => {
                        console.log("支付失败");
                        uni.redirectTo({
                            url:
                                "/pages/pay-result/index?sts=0&orderNumbers=" +
                                orderNumbers +
                                "&orderType=" +
                                this.orderType,
                        });
                    },
                });
            }catch{
                Toast("商品库存不足");
                return;
            }
        },
    },
};
</script>
<style scoped lang="scss">
.container{
    font-size: 28rpx;
}
.header {
    width: 100%;
    padding: 0 30rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    .hleft {
        display: flex;
        align-items: center;
        image {
            height: 32rpx;
            width: 32rpx;
            margin-right: 10rpx;
        }
    }
}
.arrow {
    width: 15rpx;
    height: 15rpx;
    border-top: 2rpx solid #777;
    border-right: 2rpx solid #777;
    transform: rotate(45deg);
    position: absolute;
    right: 30rpx;
    top: 25rpx;
}
main {
    .mbottom {
        padding: 0 10rpx;
        display: flex;
        justify-content: flex-end;
            line-height: 86rpx;
    border-top: 2rpx solid #f4f4f4;
    }
    .coupon {
        padding: 0 20rpx;
        li {
            display: flex;
            line-height: 80rpx;
            margin-top: 3rpx;
            &:nth-of-type(1) {
                justify-content: space-between;
                > span {
                    &:nth-of-type(2) {
                        > span {
                            color: #999;
                            &:nth-of-type(1) {
                                margin-right: 10rpx;
                            }
                        }
                    }
                }
            }
            &:nth-of-type(2) {
                align-items: center;
            }
        }
    }
    .rental {
        padding: 0 20rpx;
        li {
            display: flex;
            justify-content: space-between;
            line-height: 80rpx;
            span {
                &:nth-of-type(2) {
                    color: #eb2444;
                }
            }
        }
    }
    .subtotal {
        padding: 0 20rpx;
        color: #eb2444;
        display: flex;
        justify-content: flex-end;
         line-height: 86rpx;
    border-top: 2rpx solid #f4f4f4;
    }
}
footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-left: 20rpx;
    position: fixed;
    bottom: 0;
    button {
        background-color: #eb2444;
        color: #fff;
        border-radius: 0;
        font-size: 28rpx;
        line-height: 100rpx;
        width: 200rpx;
        margin: 0;
    }
    .fleft {
        span {
            &:nth-of-type(2) {
                color: #eb2444;
            }
        }
    }
}
.addressHeader {
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    > img {
        width: 32rpx;
        height: 32rpx;
    }
    .addresscontent {
        line-height: 48rpx;
        margin-left: 20rpx;
        div {
            &:nth-of-type(1) {
                span {
                    &:nth-of-type(2) {
                        margin-left: 30rpx;
                    }
                }
                font-size: 30rpx;
            }
            &:nth-of-type(2) {
                font-size: 26rpx;
                color: #999;
            }
        }
    }
}
</style>
